<template>
  <div class="publish-container">
    <!--面包导航区域  -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/login' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/detailsManage'}">艺术涂料管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加艺术涂料</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 标题 -->
      <div slot="header" class="clearfix">
        <span>内容添加</span>
      </div>
      <!-- 表单 -->
      <el-form ref="addArtRef" :model="art" :rules="addFormRules" label-width="50px">
        <div class="art-title">展示层</div>
        <el-form-item label="标题" prop="title">
          <el-input v-model="art.title" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="英文" prop="EnglishName">
          <el-input v-model="art.EnglishName" show-word-limit></el-input>
        </el-form-item>

        <el-form-item label="封面">
          <el-radio-group v-model="art.img" class="upload-img">
            <el-upload class="avatar-uploader" action="http://47.119.123.95:3000/art/img" :show-file-list="false"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="art.img" :src="art.img" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="分类">
          <el-select v-model="art.classify" placeholder="请选择分类">
            <el-option label="艺术涂料" value="艺术涂料"></el-option>
            <el-option label="艺术墙绘" value="艺术墙绘"></el-option>
            <el-option label="艺术浮雕" value="艺术浮雕"></el-option>
          </el-select>
        </el-form-item>

        <!-- 详细层 -->
        <div class="art-title" style="margin-top:80px">主题层</div>
        <!-- <el-form-item label="标题" prop="title">
          <el-input v-model="art.details.title" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="封面" >
          <el-radio-group v-model="art.details.img" class="upload-img">
            <el-upload
              class="avatar-uploader"
              action="http://47.119.123.95:3000/art/img"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="art.details.img" :src="art.details.img" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-radio-group>
        </el-form-item> -->

        <!-- 文本内容区域 -->

        <!-- <el-form-item label="">
          <el-tiptap v-model="art.details.article" :extensions="extensions" lang="zh" height="500"
            placeholder="请输入文章内容"></el-tiptap>
        </el-form-item> -->
        <!-- 封面 -->
        <el-form-item label="封面">
          <el-radio-group v-model="art.resource" @change="btnClick">
            <el-radio label="单图"></el-radio>
            <el-radio label="三图"></el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="fengMian" v-if="valueNum == 1">
          <el-form-item label="图片">
            <el-radio-group v-model="art.details.article3" class="upload-img">
              <el-upload class="avatar-uploader" action="http://47.119.123.95:3000/art/img" :show-file-list="true"
                :on-success="handleAvatarSuccess3" :before-upload="beforeAvatarUpload">
                <img v-if="art.details.article3" :src="art.details.article3" class="avatar2" />
                <i v-else class="el-icon-plus avatar-uploader-icon2"></i>
              </el-upload>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="fengMian" v-else>
          <el-form-item label="图片">
            <el-radio-group v-model="art.details.article3" class="upload-img">
              <el-upload class="avatar-uploader" action="http://47.119.123.95:3000/art/img" :show-file-list="true"
                :on-success="handleAvatarSuccess3" :before-upload="beforeAvatarUpload">
                <img v-if="art.details.article3" :src="art.details.article3" class="avatar2" />
                <i v-else class="el-icon-plus avatar-uploader-icon2"></i>
              </el-upload>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="">
            <el-radio-group v-model="art.details.article3" class="upload-img">
              <el-upload class="avatar-uploader" action="http://47.119.123.95:3000/art/img" :show-file-list="true"
                :on-success="handleAvatarSuccess3" :before-upload="beforeAvatarUpload">
                <img v-if="art.details.article3" :src="art.details.article3" class="avatar2" />
                <i v-else class="el-icon-plus avatar-uploader-icon2"></i>
              </el-upload>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="">
            <el-radio-group v-model="art.details.article3" class="upload-img">
              <el-upload class="avatar-uploader" action="http://47.119.123.95:3000/art/img" :show-file-list="true"
                :on-success="handleAvatarSuccess3" :before-upload="beforeAvatarUpload">
                <img v-if="art.details.article3" :src="art.details.article3" class="avatar2" />
                <i v-else class="el-icon-plus avatar-uploader-icon2"></i>
              </el-upload>
            </el-radio-group>
          </el-form-item>
        </div>

        <!-- 美术起源 -->

        <div class="art-title" style="margin-top:80px">美术起源</div>
        <el-form-item label="">
          <el-tiptap v-model="art.details.article2" :extensions="extensions" lang="zh" height="500"
            placeholder="请输入文章内容"></el-tiptap>
        </el-form-item>

        <!-- 产品特性 -->

        <div class="art-title" style="margin-top:80px">产品特性<span style="color:#c3c3c3">（建议上传尺寸为 600*200，宽高比为3:1）</span>
        </div>
        <!-- <el-form-item label="" >
          <el-tiptap
            v-model="art.details.article3"
            :extensions="extensions"
            lang="zh"
            height="500"
            placeholder="请输入文章内容"
          ></el-tiptap>
        </el-form-item> -->
        <el-form-item label="图片">
          <el-radio-group v-model="art.details.article3" class="upload-img">
            <el-upload class="avatar-uploader" action="http://47.119.123.95:3000/art/img" :show-file-list="false"
              :on-success="handleAvatarSuccess3" :before-upload="beforeAvatarUpload">
              <img v-if="art.details.article3" :src="art.details.article3" class="avatar2" />
              <i v-else class="el-icon-plus avatar-uploader-icon2"></i>
            </el-upload>
          </el-radio-group>
        </el-form-item>

        <!-- 建议使用 -->

        <div class="art-title" style="margin-top:80px">建议使用 <span style="color:#c3c3c3">（建议上传尺寸为 600*200，宽高比为3:1）</span>
        </div>
        <!-- <el-form-item label="">
          <el-tiptap v-model="art.details.article4" :extensions="extensions" lang="zh" height="500"
            placeholder="请输入文章内容"></el-tiptap>
        </el-form-item> -->
        <el-form-item label="图片">
          <el-radio-group v-model="art.details.article4" class="upload-img">
            <el-upload class="avatar-uploader" action="http://47.119.123.95:3000/art/img" :show-file-list="false"
              :on-success="handleAvatarSuccess4" :before-upload="beforeAvatarUpload">
              <img v-if="art.details.article4" :src="art.details.article4" class="avatar2" />
              <i v-else class="el-icon-plus avatar-uploader-icon2"></i>
            </el-upload>
          </el-radio-group>
        </el-form-item>

        <!-- 系列色卡 -->

        <div class="art-title" style="margin-top:80px">系列色卡 <span style="color:#c3c3c3">（请上传宽高一致的正方形图片）</span></div>

        <!-- <el-form-item label="图片">
          <el-radio-group v-model="art.details.img" class="upload-img">
            <el-upload class="avatar-uploader" action="http://47.119.123.95:3000/art/img" :show-file-list="false"
              :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload">
              <img v-if="art.details.img" :src="art.details.img" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-radio-group>
        </el-form-item> -->
        <el-upload class="upload-demo" style="width:400px" action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <!-- 添加层 -->
        <el-form-item>
          <el-button @click="$router.go(-1)">返回</el-button>
          <el-button type="primary" @click="onPublish()">添加</el-button>
        </el-form-item>
      </el-form>

    </el-card>

  </div>
</template>

<script>
import { postAddArt, postAddImg } from '@/api/art.js'
import {
  // necessary extensions
  ElementTiptap,
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  Image,
  CodeBlock,
  Link,
  TextAlign,
  Indent,
  TextColor,
  Preview,
  Fullscreen,
} from "element-tiptap";

// 富文本编辑器
import "element-tiptap/lib/index.css";
export default {
  name: 'AddArt',
  components: {
    "el-tiptap": ElementTiptap,
  },
  data () {
    return {
      fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
      //添加轮播图参数
      art: {
        title: "",
        img: "",
        classify: "",
        EnglishName: null,
        resource: '单图',
        details: {
          title: "",
          img: "",
          article: [],
          article2: "",
          article3: "",
          article4: "",
        }
      },
      valueNum: 1,
      addFormRules: {
        title: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        EnglishName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ]
      },
      dynamicValidateForm: {
        domains: [{
          value: ''
        }],
        email: ''
      },
      //富文本功能
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }), //标题
        new Bold({ bubble: true }), // render command-button in bubble menu.
        new Underline({ bubble: true }), //下划线
        new Italic(), //斜体
        new Strike(), //删除线
        new ListItem(),
        new BulletList(), //无序列表
        new OrderedList(), //有序列表
        new Image(
          {
            uploadRequest: (file) => {
              console.log(file)
              const fd = new FormData()
              fd.append('image', file)
              return postAddImg(fd).then(res => {
                // console.log(res.data)
                return res.data.url
              })
            }
          }
        ), //图片
        new CodeBlock(), //代码块
        new Link(), //连接
        new TextAlign(), //文本对齐
        new Indent(), //缩进
        new TextColor(), //文字样式
        new Preview(), //预览
        new Fullscreen(), //全屏
      ],
    };
  },
  computed: {},
  methods: {
    //添加艺术涂料
    async onPublish () {
      this.$refs.addArtRef.validate(async (valid) => {
        if (!valid) return
        const { data: res } = await postAddArt(this.art);
        if (res.meta.status !== 200) return this.$message.error("添加艺术涂料失败");
        this.$message.success("添加艺术涂料成功");
        this.$router.push("/detailsManage");
      })
    },
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePreview (file) {
      console.log(file);
    },
    //封面点击
    btnClick (value) {
      console.log(value)
      if (value != '单图') {
        this.valueNum = 3
      } else {
        this.valueNum = 1
      }
    },
    handleAvatarSuccess (res, file) {
      console.log(res)
      this.art.img = res.url;
      console.log(file)
    },
    handleAvatarSuccess2 (res, file, fileList) {
      this.art.details.img = res.url;
      console.log(file)
      console.log(fileList)
    },
    handleAvatarSuccess3 (res, file, fileList) {
      this.art.details.article3 = res.url;
      console.log(file)
      console.log(fileList)
    },
    handleAvatarSuccess4 (res, file, fileList) {
      this.art.details.article4 = res.url;
      console.log(file)
      console.log(fileList)
    },

    handleAvatarSuccess5 (res, file, fileList) {
      this.art.details.article.push(res.url)
      console.log(file)
      console.log(fileList)
    },
    handleAvatarSuccess6 (res, file, fileList) {
      // if(this.art.details.article.length >= 2){
      //   this.art.details.article.splice()
      // }
      this.art.details.article.push(res.url)
      console.log(file)
      console.log(fileList)
    },
    handleAvatarSuccess7 (res, file, fileList) {
      this.art.details.article.push(res.url)
      console.log(file)
      console.log(fileList)
    },

    beforeAvatarUpload (file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  created () { },
  mounted () { },
};
</script>

<style  scoped>
.upload-img {
  border: 1px dashed;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar-uploader-icon2 {
  font-size: 28px;
  color: #8c939d;
  width: 534px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar2 {
  width: 534px;
  height: 178px;
  display: block;
}

.art-title {
  color: #409eff;
  font-weight: 500;
  margin-bottom: 20px;
}
.fengMian {
  display: flex;
}
</style>